<template>
  <div class="app-container">
    <div class="filterDiv">
      <label class="label">期间</label>
      <PeriodList :start="listQuery.periodCode1" :end="listQuery.periodCode2" />
      <label class="label">科目</label>
      <el-select v-model="listQuery.coaCode1" size="small" placeholder="科目" filterable>
        <el-option v-for="item in coaArr" :key="item.id" :label="item.name" :value="item.coaCode" />
      </el-select>
      <el-select v-model="listQuery.auxiliaryType" size="small" placeholder="辅助核算类型" @change="auxiliaryChange">
        <el-option v-for="item in auxiliaryArr" :key="item.auxiliaryTypeCode" :label="item.auxiliaryTypeName" :value="item.auxiliaryTypeCode" />
      </el-select>
      <el-select v-model="listQuery.auxiliaryCode" size="small" placeholder="核算项">
        <el-option label="全部" :value="null" />
        <el-option v-for="item in auxiliaryItemList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-popover placement="bottom" title="更多" width="280" trigger="click">
        <div>
          <p>
            <el-checkbox v-model="listQuery.isShowCoa" :false-label="0" :true-label="1">显示末级科目</el-checkbox>
          </p>
          <p>
            <el-checkbox v-model="listQuery.isShowNetAndBalanceNotEqualToZero" :false-label="0" :true-label="1">发生额为0且余额为0不显示</el-checkbox>
          </p>
        </div>
        <el-button slot="reference" round size="small">
          更多
          <i class="el-icon-arrow-right el-icon--right" />
        </el-button>
      </el-popover>
      <el-button size="small" round type="primary" @click="getList">查询</el-button>
      <el-button-group style="float:right;margin-top:5px">
        <el-button v-permiss="['368010']" type="primary" size="small" round icon="el-icon-printer" title="打印" @click="printBook" />
        <el-button v-permiss="['368020']" type="primary" size="small" round icon="el-icon-document" title="导出" @click="exportBook" />
      </el-button-group>
    </div>
    <div class="contentDiv">
      <el-table :key="tableKey" v-loading="listLoading" :data="pageData" border fit highlight-current-row style="width: 100%;" size="small">
        <el-empty slot="empty" :image-size="120" />
        <el-table-column label="日期" align="center">
          <template slot-scope="{row}">
            <span>{{ row.jeDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="凭证字号" align="center">
          <template slot-scope="{row}">
            <span class="tlink" @click="toVoucher(row)">{{ row && row.catogeryNameSeq }}</span>
          </template>
        </el-table-column>
        <el-table-column label="摘要">
          <template slot-scope="{row}">
            <span>{{ row.summary }}</span>
          </template>
        </el-table-column>
        <el-table-column label="辅助项名称" show-overflow-tooltip>
          <template slot-scope="{row}">
            <span>{{ row.coaCobinationName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="借方金额" align="right">
          <template slot-scope="{row}">
            <span>{{ row.accountedDr | Fixed }}</span>
          </template>
        </el-table-column>
        <el-table-column label="贷方金额" align="right">
          <template slot-scope="{row}">
            <span>{{ row.accountedCr | Fixed }}</span>
          </template>
        </el-table-column>
        <el-table-column label="方向" align="center">
          <template slot-scope="{row}">
            <span>{{ row.crDrStr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="余额" align="right">
          <template slot-scope="{row}">
            <span>{{ row.balance | Fixed }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>20" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.limit" @pagination="getDataByPage" />
    </div>
  </div>
</template>
<script>
import { getProjsubsidiary, exportProjsubsidiary, printProjsubsidiary } from '@/api/accbook'
import { mapGetters } from 'vuex'
import { getAuxiliary } from '@/api/auxiliary'
import PeriodList from '@/components/voucher/periodList'
import { getNowMonth } from '@/utils/index'
import { getCoas } from '@/api/voucher'
export default {
  name: 'Projsubsidiary',
  components: { PeriodList },
  filters: {
    Fixed: function(num) {
      if (!num) {
        return ''
      }
      return parseFloat(num).toFixed(2)
    }
  },
  data() {
    return {
      tableKey: 0,
      tableData: [],
      pageData: [],
      total: 0,
      listLoading: true,
      auxiliaryItemList: [],
      listQuery: {
        periodCode1: this.$route.query.t1 || getNowMonth(),
        periodCode2: this.$route.query.t2 || getNowMonth(),
        coaCode1: this.$route.query.coa || '',
        coaCode2: '',
        auxiliaryType: '',
        auxiliaryCode: this.$route.query.code || '',
        isShowCoa: 1,
        isShowNetAndBalanceNotEqualToZero: 1,
        pageIndex: 1,
        limit: 20
      },
      coaArr: []
    }
  },
  computed: {
    ...mapGetters(['auxiliaryArr'])
  },
  created() {
    var obj = { includeRoot: 0, isAuxiliary: 1 }
    getCoas(obj).then((res) => {
      this.coaArr = res.data.data || []
    })
    this.$store.dispatch('voucher/getAuxiliaryTypeList')
  },
  activated() {
    this.listQuery.periodCode1 = this.$route.query.t1 || getNowMonth()
    this.listQuery.periodCode2 = this.$route.query.t2 || getNowMonth()
    this.listQuery.coaCode1 = this.$route.query.coa || ''
    this.listQuery.auxiliaryCode = this.$route.query.code || ''
    this.getList()
  },
  methods: {
    toVoucher(row) {
      const arr = this.tableData.filter(it => it && it.jeHeaderId)
      const ddd = arr.map(it => it.jeHeaderId)
      this.$router.push('/voucher/detail?id=' + row.jeHeaderId + '&arr=' + ddd.join(','))
    },
    changeVal(obj) {
      for (const key in obj) {
        this.listQuery[key] = obj[key]
      }
    },
    auxiliaryChange(auxiliaryTypeCode) {
      this.auxiliaryItemList = []
      getAuxiliary({ auxiliaryTypeCode }).then((res) => {
        this.auxiliaryItemList = res.data.data || []
      })
      this.listQuery.auxiliaryCode = ''
    },
    getDataByPage() {
      var pageIndex = this.listQuery.pageIndex
      var arr = []
      var min = pageIndex * 20 - 20
      var max = pageIndex * 20 <= this.total ? pageIndex * 20 : this.total
      for (var i = min; i < max; i++) {
        arr.push(this.tableData[i])
      }
      this.pageData = arr
    },
    getList() {
      this.listLoading = true
      this.listQuery.pageIndex = 1
      getProjsubsidiary(this.listQuery)
        .then((res) => {
          this.listLoading = false
          this.tableData = res.data.data
          this.total = res.data.data.length
          this.getDataByPage()
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    exportBook() {
      exportProjsubsidiary(this.listQuery)
    },
    printBook() {
      printProjsubsidiary(this.listQuery).then((res) => {
        window.open('http://' + window.location.host + res.data.data)
      }).catch(() => {
        this.listLoading = false
      })
    }
  }
}
</script>
